<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<style type="text/css">
		.el-collapse-item div {
			font-size: 16px;
		}

		#menu {
			position: fixed;
			bottom: 25px;
			right: 25px;
			z-index: 999;
		}

		.menu-items {
			display: flex;
			flex-direction: column-reverse;
			position: fixed;
			bottom: 75px;
			right: 25px;
			z-index: 999;
		}

		img {
			max-width: 100vw;
		}

		.el-button+.el-button {
			margin-left: 0px;
		}

		.menu-item {
			margin-top: 5px;
		}
	</style>
</head>

<body>
	<div id="app">
		<!-- 标签页必须是div，并且id要以Tag结尾 -->
		<div id="wordTag">
			<el-table :data="words" stripe @row-click="tableClick" row-key="word" :tree-props="{children: 'children'}">
				<el-table-column prop="word" label="单词" width="250%"></el-table-column>
				<el-table-column prop="meaning" label="解释"></el-table-column>
			</el-table>
			<el-button type="primary" @click="showAllMeaning">显示</el-button>
			<el-button type="primary" @click="hideAllMeaning">隐藏</el-button>
		</div>

		<div id="etymaTag">
			<el-collapse v-model="activeNames">
				<el-collapse-item title="bio 生命" name="1">
					<el-row>
						<el-col :span="6">biography</el-col>
						<el-col :span="9">传记；写传记</el-col>
					</el-row>
				</el-collapse-item>
			</el-collapse>
		</div>

		<div id="prefixTag">
			<div style="text-align: center;">
				<img src="./affix.png" alt="词缀" />
			</div>

		</div>

		<div id="phraseTag">
			phrase
		</div>

		<div id="sentenceTag">
			<el-collapse v-model="activeNames">
				<el-collapse-item
					title="this rainy evening the wind is restless. I look at the swaying branches and ponder over the greatness of all things."
					name="1">
					<el-row>
						<el-col :span="4">释义</el-col>
						<el-col :span="20">巴拉巴拉</el-col>
					</el-row>
					<el-row>
						<el-col :span="4">出处</el-col>
						<el-col :span="20">Tagore／泰戈尔</el-col>
					</el-row>
					<el-row>
						<el-col :span="4">标签</el-col>
						<el-col :span="20">A、B、C</el-col>
					</el-row>
				</el-collapse-item>
			</el-collapse>
		</div>

		<div id="wordBetterTag">

		</div>

		<!-- 菜单 -->
		<el-button id="menu" @click="show = !show" type="primary" icon="el-icon-menu" circle></el-button>
		<transition name="el-fade-in">
			<div v-show="show" class="menu-items">
				<el-dropdown placement="left" class="menu-item" @command="menuClick">
					<el-button>单词</el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="word">单词</el-dropdown-item>
						<el-dropdown-item command="etyma" divided>词根</el-dropdown-item>
						<el-dropdown-item command="prefix" divided>前缀</el-dropdown-item>
						<el-dropdown-item command="suffix">后缀</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<el-button id="phrase" class="menu-item" @click="menuClick($event)">短语</el-button>
				<el-button id="sentence" class="menu-item" @click="menuClick($event)">句子</el-button>
				<el-dropdown placement="left" class="menu-item" @command="menuClick">
					<el-button>写作</el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="wordBetter">单词用这些！</el-dropdown-item>
						<el-dropdown-item command="phraseBetter">短语用这些！</el-dropdown-item>
						<el-dropdown-item command="sentenceBetter">句型用这些！</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</transition>
	</div>
</body>

<script>
	new Vue({
		el: '#app',
		data: {
			show: false,
			activeNames: [],
			isFold: false,
			showMeaning: [],
			words: [{
				word: "influential",
				meaning: "影响者，大V"
			}, {
				word: "考研最常用的三个描述",
				meaning: "portray illuminate describe"
			}, {
				word: "stop",
				meaning: "红灯",
				children: [{
					word: "think",
					meaning: "黄灯"
				}, {
					word: "proceed",
					meaning: "绿灯"
				}]
			}],
			wordsCopy: [],
			wordsBetter: [{

			}]
		},
		methods: {
			//单词
			tableClick: function (row, column, event) {
				let im = this.findTableData(row.word)
				let i = im[0]

				let width = document.getElementsByClassName("el-table_1_column_1")[0].clientWidth
				if (event.clientX >= width) {
					this.showMeaning[i] = !this.showMeaning[i]
				}

				if (this.showMeaning[i]) {
					row.meaning = im[1]
				} else {
					row.meaning = ''
				}
			},
			findTableData: function (word) {
				for (i in this.wordsCopy) {
					let item = this.wordsCopy[i]
					if (item.word == word) {
						return [i, item.meaning]
					}
				}
			},
			showAllMeaning: function () {
				for (i in this.showMeaning) {
					this.showMeaning[i] = true
				}
				this.words = $.extend(true, [], this.wordsCopy)
			},
			hideAllMeaning: function () {
				for (i in this.showMeaning) {
					this.showMeaning[i] = false
				}
				for (i in this.words) {
					this.words[i].meaning = ''
				}
			},
			//
			fold: function () {
				this.isFold = !this.isFold
				let isFold = this.isFold
				if (isFold) {
					let length = $('#items>.el-collapse-item').length
					let array = []
					while (length != 0) {
						array.push(length.toString())
						length--
					}
					this.activeNames = array
				} else {
					this.activeNames = []
				}
			},
			menuClick: function (event) {
				let id = event + 'Tag'
				if (typeof (event) != "string")
					id = $(event.currentTarget)[0].id + 'Tag'

				$('#app>div').each((i, e) => {
					if (e.id.search(".*Tag$") == 0) {
						if (e.id != id)
							e.style.display = 'none'
						else
							e.style.display = 'unset'
					}
				})

				this.show = false
			}
		},
		mounted() {
			//this.fold()

			//除word外标签页全部隐藏
			$('#app>div').each((i, e) => {
				if (e.id.search(".*Tag$") == 0 && e.id != 'wordTag')
					e.style.display = 'none'
			})

			//单词
			for (i in this.words) {
				this.showMeaning.push(true)
			}
			this.wordsCopy = $.extend(true, [], this.words)

		},
	})
</script>

</html>